<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>012-纯CSS霓虹灯文本效果</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>

  <body>
    <!-- 
      data-* : HTML元素的全局自定义属性，为元素嵌入自定义的数据，可以通过JS实现HTML与DOM的数据交换(通过DOM修改元素的data-*属性指向的数据)。
      备注：data-*中，*可以是任意单词。如data-text, data-name, data-random, ...，随便定义。这种属性有点类似于{字典}，给元素“对象”添加
          额外的属性数据，并且可以被调用。如在CSS中通过atrr(<data-*>)调用被选择器选中的元素的属性值。
      ref: [data-* - HTML（超文本标记语言） | MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/data-*) 
    -->
    <h1 data-text="[Neon_Light]">[Neon_Light]</h1>
  </body>
</html>
